import React, { useRef, useState } from 'react'
import axios from 'axios'
import { withRouter } from 'react-router-dom';
import { List, Image, InfiniteScroll } from 'antd-mobile';

 function Nowplaying(props) {
    const [list, setlist] = useState([]);
    const [hasMore, sethasMore] = useState(true);
    const count = useRef(0)
    var handleClick = (id) =>{
        props.history.push(`/detail/${id}`)    //编程式导航
    }
    var loadMore = () =>{
            console.log('触底')
            sethasMore(false);
            count.current++
            axios({
                url:`https://m.maizuo.com/gateway?cityId=440300&pageNum=${count.current}&pageSize=10&type=1&k=8026654`,
                headers:{
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"165294070798642513887233"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res =>{
                console.log(res.data.data.films)
                setlist([...list, ...res.data.data.films]);
                sethasMore(res.data.data.films.length > 0)
            })
    }
  return (
    <ul>
            <List style={{paddingBottom:'4rem'}}>
            {list.map(item => (
                <List.Item
                onClick={()=>{
                    handleClick(item.filmId)
                }}
                key={item.filmId}
                prefix={
                    <Image
                    src={item.poster}
                    fit='cover'
                    width={60}
                    />
                }
                description={item.nation}
                >
                {item.name}
                </List.Item>
            ))}
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
    </ul>
  )
}

export default withRouter(Nowplaying);